<script lang="ts" setup>
  import { defineProps, ref, watch, defineEmits } from "vue"
  import { getSiteCustomDepartmentList } from "@/api/site"

  const props = defineProps(['modelValue','width']);
  const emit = defineEmits(['update:modelValue', 'change']);


  const list = ref([])
  const data = ref<any>(props.modelValue)

  getSiteCustomDepartmentList({currentPage: 1,pageSize: 999999}).then((res)=>{
    list.value = res.data
  })

  const change = (e) => {
    const selectedItem = list.value.find(item => item.siteId === e)
    emit('change', selectedItem)
    emit('update:modelValue', e)
  }

  watch(
    () => props.modelValue,
    (newVal, oldVal) => {
      data.value = newVal
    }
  )
</script>

<template>
  <el-select :style="`width: ${!width ? '200px' : width}`" v-model="data" placeholder="请选择" @change="change" clearable>
    <el-option v-for="item in list" :label="item.name" :value="item.siteId"></el-option>
  </el-select>
</template>

<style lang="scss" scoped>

</style>
